<template>
  <!--  <HeaderDetail />-->
  <div style="margin: 10px 6% 0 6%">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span class="search-card-title">{{ type }} Component Import</span>
        </div>
      </template>
      <el-row>
        <el-col :span="6" >
          <span><a href="../../../assets/file/template.xlsx">Download the template</a></span>
          <el-upload
                  class="upload-demo"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-remove="beforeRemove"
                  multiple
                  style="margin-top: 5px"
                  :limit="3"
                  :on-exceed="handleExceed"
                  :file-list="fileList"
          >
            <el-button type="primary">Click to upload the data</el-button>
          </el-upload>
        </el-col>
      </el-row>
      <el-row>
        <el-col
          :span="6"
          :offset="18"
          style="text-align: end; padding-right: 10px;position: relative;"
        >
          <el-button type="primary">IMPORT</el-button>
        </el-col>
      </el-row>
    </el-card>
    <!--<el-card class="box-card" style="margin-top: 5px">
      <template #header>
        <div class="card-header">
          <span class="search-card-title">{{ type }} Multiple Sequence Import</span>
        </div>
      </template>
      <el-row>
        <el-col :span="6" >
          <span><a href="../../../assets/file/template.xlsx">Download the template</a></span>
          <el-upload
                  class="upload-demo"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-remove="beforeRemove"
                  multiple
                  style="margin-top: 5px"
                  :limit="3"
                  :on-exceed="handleExceed"
                  :file-list="fileList"
          >
            <el-button type="primary">Click to upload the data</el-button>
          </el-upload>
        </el-col>
      </el-row>
      <el-row>
        <el-col
                :span="6"
                :offset="18"
                style="text-align: end; padding-right: 10px;position: relative;"
        >
          <el-button type="primary">IMPORT</el-button>
        </el-col>
      </el-row>
    </el-card>-->
    <el-dialog
      v-model="dialogVisible"
      :title="compoundName ? compoundName : 'Tips'"
      width="30%"
      :before-close="handleClose"
    >
      <div>
        <img style="width: 100%;" :src="require('../../assets/img/compound.png')" alt="" />
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { ref } from "vue";
  // import HeaderDetail from "../../components/HeaderDetail.vue";
  import { RemoveFilled, Plus, Delete, Edit, PictureFilled } from "@element-plus/icons-vue";
  import router from "@/router";
  export default {
    name: "SequenceImport",
    components: {
    },
    data() {
      return {
        type: "",
        searchInfo: [
          {
            smiles: "",
            compound: ""
          },
        ],
        dialogVisible: false,
        compoundName: "",
      };
    },
    created () {
      if (this.$route.params.type === "Add") {
        this.type = "Add";
      } else if (this.$route.params.type === "Edit") {
        this.type = "Edit";
        this.searchInfo.compound = this.$route.params.name;
        this.searchInfo.smiles = this.$route.params.smiles;
      }
    },
    methods: {
      handleClose () {
        this.dialogVisible = false;
        this.compoundName = "";
      },
      goHistory () {
        window.history.go(-1);
      }
    },
  };
</script>
<style scoped>
    .search-card-title {
        font-size: 16px;
        font-weight: 500;
    }
    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .download-icon {
        position: relative;
        top: 3px;
        color: #166fe7;
    }
    .text {
        font-size: 14px;
    }
    .item {
        margin-bottom: 18px;
    }
    .box-card {
        width: 100%;
    }
    .el-card /deep/.el-card__header {
        background-color: #64bce7;
        padding: 6px;
    }
    .el-card /deep/.el-card__body {
        padding: 8px;
    }
    .demo-date-picker {
        display: flex;
        width: 100%;
        padding: 0;
        flex-wrap: wrap;
    }
    .demo-date-picker .block {
        padding: 30px 0;
        text-align: center;
        border-right: solid 1px getCssVar("border-color");
        flex: 1;
    }
    .demo-date-picker .block:last-child {
        border-right: none;
    }
    .demo-date-picker .demonstration {
        display: block;
        color: var(--el-text-color-secondary);
        font-size: 14px;
        margin-bottom: 20px;
    }
</style>
